import React, { FC, useEffect,useState } from 'react';

import {  Table, Popconfirm } from 'antd';
import { Link } from 'react-router-dom'

import { get,del } from '../../network/protocol'
import './style.less'

const List: FC = () => {
  const  [data2, setData2] = useState([]) 
  const  [loading, setL] = useState(false) 

  useEffect(() => {
    getData()
  }, [])

  const getData = async() => {
    setL(true)
    let param = {
      pageIndex: 1,
      pageSize: 1000,
    }
    try {
      let data = await get(param);
    if(data.errorCode === 0) {
      let data1 = data.source.items;
      setData2(data1)
    }
    } catch (error) {
      
    }
    setL(false)
    
  }

  const btnClick = async(artworkId:any) => {
    let data = await del([artworkId])
    try{
      if(data.errorCode === 0) {
        getData();
      }
    }
  catch (error) {
      console.log(error)
    }
  }

  const columns = [
    {
      title: '作品id',
      dataIndex: 'artworkId',
      key: 'artworkId',
    },
    {
      title: '名称',
      dataIndex: 'artworkName',
      key: 'artworkName',
    },
    {
      title: '图片',
      dataIndex: 'imageUrl',
      key: 'imageUrl',
      render(text:any,){
        return <img className="img1" src={text} alt="" key={text}/>
      }
    },
    {
      title: 'option',
      key: 'option',
      render: (b:any,a:any) => {
        return <>
          <Link to={`/home/${a.artworkId}`} style={{ marginRight: 20 }}>编辑</Link>
          <Popconfirm
            title="确认删除？"
            onConfirm={()=>btnClick(a.artworkId)}
            okText="是"
            cancelText="否"
          >
            <a>删除</a >
          </Popconfirm>
        </>
      }
    }
  ];

  return (
    <Table loading={loading} dataSource={data2} columns={columns} rowKey="artworkId"/>
  )
}

export default List